<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>歌曲列表</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.css}" />
<style>
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #faf7fc;
}

.container {
	position: absolute;
	top: 40%;
	left: 50%;
	z-index: 10;
	transform: translate(-50%, -50%);
	width: 500px;
}

.footer {
	text-align: center;
	position: relative;
	bottom: 100px;
}

.footer span, a {
	color: #aebdc9;
}

#example {
	text-align: center;
}
</style>
</head>

<body>
	<div id="list">
		<table class="table table-hover"
			style="border-width: 1px; border-style: dashed;">
			<thead>
				<tr>
					<th>序号</th>
					<th>歌名</th>
				</tr>
			</thead>
			<tr th:each="obj:${list}">
				<td th:text="${obj.id}">${obj.id}</td>
				<td th:text="${obj.name}">${obj.name}</td>
			</tr>
			<tbody>
			</tbody>
		</table>

	</div>
	<div class="container">
		<div id="example">
			<ul id="page">
			</ul>
		</div>
	</div>
	<!-- 	<div class="footer">
		<a target="_blank" href="http://www.linksky-tech.com/">天讯科技</a> <span
			class="dot"> · </span> <a target="_blank"
			href="http://www.fengkuangjike.com/">疯狂极客</a> <span class="dot">
			· </span> <a target="_blank" href="http://www.xiao-cloud.com/">小程序</a> <span
			class="dot"> · </span> <a href="#">联系我们</a> <span>2017©All
			Rights Reserved</span> <span class="dot"> · </span> <span>增值电信经营许可证
			B2-00000000</span> <span class="dot"> ·</span> <span> 陕 ICP 备
			00005435 号</span>
	</div> -->
	<script src="js/jquery.js"></script>
	<script src="js/bootstrap.js"></script>
	<script src="js/bootstrap-paginator.js"></script>
	<script>
		$('#page').bootstrapPaginator(
						{
							currentPage : 1,//当前的请求页面。
							totalPages : 1000,//一共多少页。
							size : "normal",//页眉的大小。
							bootstrapMajorVersion : 3,//bootstrap的版本要求。
							alignment : "right",
							numberOfPages : 10,//一页列出多少数据。
							itemTexts : function(type, page, current) {//如下的代码是将页眉显示的中文显示我们自定义的中文。
								switch (type) {
								case "first":
									return "首页";
								case "prev":
									return "上一页";
								case "next":
									return "下一页";
								case "last":
									return "末页";
								case "page":
									return page;
								}
							},
							onPageClicked : function(event, originalEvent,
									type, page) {//给每个页眉绑定一个事件，其实就是ajax请求，其中page变量为当前点击的页上的数字。
								$('#list').html("");//清空   
								$
										.ajax({
											url : '/song',
											type : 'post',
											data : {
												'page' : page,
												'count' : 10
											},
											dataType : 'JSON',
											success : function(data) {
												$.each(
														 data.content,
														 function(id,song) { //遍历返回的json
																	$("#list").append('<table class="table table-hover" style="border-width: 1px;border-style: dashed;">');
																	$("#list").append('<thead>');
																	$("#list").append('<tr>');
																	$("#list").append('<th>歌名</th>');
																	$("#list").append('<th>&nbsp;</th>');
																	$("#list").append('</tr>');
																	$("#list").append('</thead>');
																	$("#list").append('<tbody>');
																	$("#list").append('<tr>');
																	$("#list").append('<a href="https://music.163.com//song?id='+ song.id+ '">'+ song.name+ '</a>');
																	$("#list").append('<td>');
																	$("#list").append('</td>');
																	$("#list").append('</tr>');
																	$("#list").append('</tbody>');
																	$("#list").append('<tr>');
																	$("#list").append('</tr>');
																	$("#list").append('</table>');
																})
											}
										})
							}
						});
	</script>
</body>
</html>